import { Upload, Icon, Modal, message } from 'antd'
import React from 'react'
import { style } from './Upload_photos.less'

export class UploadPhotos extends React.Component {
    state={
      previewVisible: false,
      previewImage: '',
      fileList: [],
    }
    customerRequest = (...param) => {
      this.props.handleUpload(param[0].file)
    }
    handleCancel = () => this.setState({ previewVisible: false })
    handlePreview = (file) => {
      this.setState({
        previewImage: file.url || file.thumbUrl,
        previewVisible: true,
      })
    }
    handleChange = ({ fileList }) => {
      this.setState({ fileList: fileList })
    }
    handleRemove = (file) => {
      this.props.handleRemove(file)
      message.success('detete success')
    }
    render () {
      const { previewVisible, previewImage } = this.state
      const { fileList } = this.props
      const uploadButton = (
        <div>
          <Icon type="plus" />
          <div >Upload</div>
        </div>
      )
      return (
        <div >
          <Upload
            customRequest={this.customerRequest}
            listType="picture-card"
            fileList={fileList}
            onPreview={this.handlePreview}
            onChange={this.handleChange}
            style={{ width: '100px', height: '100px' }}
            onRemove={this.handleRemove}
          >
            {fileList.length >= 10000 ? null : uploadButton}
          </Upload>
          <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel} width="50%">
            <img alt="example" style={{ width: '100%' }} src={previewImage} />
          </Modal>
        </div>
      )
    }
}

